<!-- 验证规则 -->
<template>
  <div class="tab5">
    <!-- 按纽栏组件 -->
    <div class="button-group">
      <a-button type="primary" icon="plus" @click="clickButton('add')" class="icon-button">新增</a-button>
      <a-button icon="edit" @click="clickButton('edit')" class="icon-button">编辑</a-button>
      <a-button icon="delete" @click="clickButton('del')" class="icon-button">删除</a-button>
    </div>
    <!-- 验证规则表格 -->
    <el-table
      :data="tab5TableData"
      highlight-current-row
      border
      height="calc(100% - 42px)"
      :row-style="{height:'40px'}"
      :cell-style="{padding:'0px'}"
      :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
      style="width: 100%">
      <slot v-for="(item,index) in tab5Columns">
        <el-table-column
          :key="index"
          :property="item.field"
          :label="item.title"
          :width="item.width"
          show-overflow-tooltip
          sortable>
        </el-table-column>
      </slot>
    </el-table>

    <!-- 验证规则弹出框 -->
    <a-modal
      :maskClosable="false"
      :title="modalYZTitle"
      v-model="dialogYZVisible"
      @ok="handleOk">
      <a-form
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 18 }"
        :form="form">
        <a-form-item label="数据表字段">
          <a-select v-decorator="[ 'Field_Name', {rules: [{ required: true, message: '请选择数据表字段!' }]} ]">
            <a-select-option v-for="(item, index) in dictionary.Field_Name" :key="index" :value="item.B_ID">{{ item.B_Value }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="验证函数名称">
          <a-select v-decorator="[ 'S_Name', {rules: [{ required: true, message: '请选择验证函数名称!' }]} ]">
            <a-select-option v-for="(item, index) in dictionary.S_Name" :key="index" :value="item.B_ID">{{ item.B_Value }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="验证值">
          <a-input v-decorator="[ 'S_Check' ]" />
        </a-form-item>
        <a-form-item label="验证错误信息提示">
          <a-input v-decorator="[ 'S_Error' ]" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      tab5TableData: [],
      tab5Columns: [
        {
          title: '数据表字段',
          field: 'Field_Name'
        },
        {
          title: '验证函数名称',
          field: 'S_Name'
        },
        {
          title: '验证函数说明',
          field: 'S_Explain'
        },
        {
          title: '验证值（多个判断值用逗号隔开）',
          field: 'S_Check',
          width: 250
        },
        {
          title: '错误提示',
          field: 'S_Error'
        },
        {
          title: '创建时间',
          field: 'S_Time'
        }
      ],
      modalYZTitle: '',
      dialogYZVisible: false,
      form: this.$form.createForm(this),
      dictionary: {
        Field_Name: [
          { B_ID: 1, B_Value: '年代号' },
          { B_ID: 2, B_Value: '接收日期' },
          { B_ID: 3, B_Value: '移交日期' },
          { B_ID: 4, B_Value: '目录号' },
          { B_ID: 5, B_Value: '操作员' },
          { B_ID: 6, B_Value: '案卷标题' },
          { B_ID: 7, B_Value: '库位号' }
        ],
        S_Name: [
          { B_ID: 1, B_Value: 'Is_NonRepeatable|判断字段值是否唯一' },
          { B_ID: 2, B_Value: 'Is_String_Null_Valid|判断输入的值是否为空（文字类型）' },
          { B_ID: 3, B_Value: 'Is_Guid_Null_Valid|判断输入的值是否为空（编号类型）' }
        ]
      }
    }
  },
  created () {},
  mounted () {},
  methods: {
    clickButton (val) {
      switch (val) {
        case 'add':
          this.modalYZTitle = '添加验证规则'
          this.dialogYZVisible = true
          this.form.resetFields() // 表单清空
          break
        case 'edit':
          this.modalYZTitle = '编辑验证规则'
          this.dialogYZVisible = true
          break
        case 'del':
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        default:
          break
      }
    },
    handleOk () {}
  }
}
</script>

<style lang="less" scoped>
.tab5 {
  height: 100%;
  padding: 15px;
  .button-group {
    margin-bottom: 10px;
  }
}
</style>
